<script setup>
import { ref, onMounted } from 'vue'

const constitutionResult = ref(null)
const activeTab = ref('diet')

// 各体质的养生建议
const constitutionAdvice = {
  pingHe: { // 平和质
    diet: [
      { name: '饮食原则', content: '饮食宜清淡均衡，五味调和，不偏不倚。' },
      { name: '推荐食物', content: '各种新鲜蔬果、粗粮、瘦肉、鱼类等均衡摄入。' },
      { name: '少吃食物', content: '过于油腻、辛辣刺激的食物，避免暴饮暴食。' },
      { name: '饮食习惯', content: '定时定量，细嚼慢咽，七分饱即可。' }
    ],
    exercise: [
      { name: '运动原则', content: '坚持适量运动，动静结合，不宜过度。' },
      { name: '推荐运动', content: '太极拳、慢跑、游泳、散步、八段锦等。' },
      { name: '运动频率', content: '每周3-5次，每次30-60分钟。' },
      { name: '注意事项', content: '运动量循序渐进，避免过度疲劳。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持心情舒畅，避免情绪大起大落。' },
      { name: '调节方法', content: '培养兴趣爱好，保持良好的人际关系，适当参加社交活动。' },
      { name: '生活习惯', content: '作息规律，保证充足睡眠，避免熬夜。' },
      { name: '心理建议', content: '保持乐观开朗的心态，遇事不急不躁。' }
    ]
  },
  qiXu: { // 气虚质
    diet: [
      { name: '饮食原则', content: '饮食宜温补，多食补气健脾的食物。' },
      { name: '推荐食物', content: '山药、大枣、黄芪、党参、小米、南瓜、鸡肉、牛肉等。' },
      { name: '少吃食物', content: '生冷、寒凉、油腻的食物，如冰品、生菜等。' },
      { name: '饮食习惯', content: '少食多餐，细嚼慢咽，避免过度劳累后立即进食。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合缓和的运动，避免剧烈运动和过度疲劳。' },
      { name: '推荐运动', content: '散步、太极拳、八段锦、导引等。' },
      { name: '运动频率', content: '每天1-2次，每次15-30分钟，量力而行。' },
      { name: '注意事项', content: '运动后注意保暖，避免大汗淋漓。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持心情舒畅，避免过度思虑和忧愁。' },
      { name: '调节方法', content: '多听轻松愉快的音乐，适当参加集体活动增强信心。' },
      { name: '生活习惯', content: '早睡早起，保证充足睡眠，避免过度劳累。' },
      { name: '心理建议', content: '培养积极乐观的心态，避免过度焦虑和担忧。' }
    ]
  },
  yangXu: { // 阳虚质
    diet: [
      { name: '饮食原则', content: '饮食宜温热，忌生冷寒凉。' },
      { name: '推荐食物', content: '羊肉、狗肉、鸡肉、韭菜、生姜、桂圆、核桃等温阳食物。' },
      { name: '少吃食物', content: '西瓜、梨、绿茶、苦瓜等寒凉食物。' },
      { name: '饮食习惯', content: '食物宜热食，避免冷饮，尤其是冬季。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合温和的运动，注意保暖。' },
      { name: '推荐运动', content: '八段锦、太极拳、散步、慢跑等。' },
      { name: '运动频率', content: '每天1-2次，每次20-30分钟，避免在寒冷环境中运动。' },
      { name: '注意事项', content: '运动时注意保暖，避免受凉，运动后及时擦干汗液。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持乐观情绪，避免忧郁和恐惧。' },
      { name: '调节方法', content: '多晒太阳，增加室内温度，穿着温暖。' },
      { name: '生活习惯', content: '早睡早起，保持规律作息，避免熬夜。' },
      { name: '心理建议', content: '增强自信心，避免过度担忧和恐惧。' }
    ]
  },
  yinXu: { // 阴虚质
    diet: [
      { name: '饮食原则', content: '饮食宜清淡滋阴，忌辛辣温燥。' },
      { name: '推荐食物', content: '百合、银耳、梨、莲子、豆腐、鸭肉、鱼肉、蜂蜜等。' },
      { name: '少吃食物', content: '辣椒、生姜、羊肉、狗肉等温热燥烈食物。' },
      { name: '饮食习惯', content: '多喝水，少食多餐，避免过度饥饿。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合柔和的运动，避免剧烈运动和大汗淋漓。' },
      { name: '推荐运动', content: '太极拳、瑜伽、散步、游泳等。' },
      { name: '运动频率', content: '每天1次，每次20-30分钟，避免在炎热环境中运动。' },
      { name: '注意事项', content: '运动量适中，避免大汗淋漓，运动后及时补充水分。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持心态平和，避免过度兴奋和激动。' },
      { name: '调节方法', content: '练习冥想和深呼吸，保持情绪稳定。' },
      { name: '生活习惯', content: '保证充足睡眠，避免熬夜和过度劳累。' },
      { name: '心理建议', content: '避免情绪激动，保持平静心态。' }
    ]
  },
  tanShi: { // 痰湿质
    diet: [
      { name: '饮食原则', content: '饮食宜清淡，健脾祛湿。' },
      { name: '推荐食物', content: '薏米、赤小豆、冬瓜、苦瓜、荷叶、山楂等。' },
      { name: '少吃食物', content: '肥肉、奶油、甜食、油炸食品等。' },
      { name: '饮食习惯', content: '定时定量，少食多餐，晚餐宜少。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合有氧运动，促进代谢，消耗脂肪。' },
      { name: '推荐运动', content: '快走、慢跑、游泳、骑自行车等。' },
      { name: '运动频率', content: '每天1-2次，每次30-60分钟。' },
      { name: '注意事项', content: '坚持长期运动，控制体重，避免久坐不动。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持心情舒畅，避免忧思郁结。' },
      { name: '调节方法', content: '多参加户外活动，增加阳光照射。' },
      { name: '生活习惯', content: '早睡早起，避免久坐，保持环境干燥通风。' },
      { name: '心理建议', content: '保持开朗乐观的心态，避免抑郁情绪。' }
    ]
  },
  shiRe: { // 湿热质
    diet: [
      { name: '饮食原则', content: '饮食宜清淡，清热祛湿。' },
      { name: '推荐食物', content: '绿豆、苦瓜、冬瓜、黄瓜、西瓜、薏米、赤小豆等。' },
      { name: '少吃食物', content: '辛辣、油炸、甜腻、酒类等。' },
      { name: '饮食习惯', content: '少食多餐，避免暴饮暴食，多喝水。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合有氧运动，促进汗液排出。' },
      { name: '推荐运动', content: '游泳、慢跑、快走等。' },
      { name: '运动频率', content: '每天1次，每次30-45分钟。' },
      { name: '注意事项', content: '运动后及时擦干汗液，避免受凉。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持心情平和，避免暴躁易怒。' },
      { name: '调节方法', content: '练习深呼吸和冥想，保持情绪稳定。' },
      { name: '生活习惯', content: '保持环境通风干燥，避免潮湿环境。' },
      { name: '心理建议', content: '培养平和心态，避免急躁情绪。' }
    ]
  },
  xueYu: { // 血瘀质
    diet: [
      { name: '饮食原则', content: '饮食宜活血化瘀，忌油腻厚味。' },
      { name: '推荐食物', content: '红枣、桃仁、黑木耳、山楂、玫瑰花、红糖、醋等。' },
      { name: '少吃食物', content: '肥肉、动物内脏、油炸食品等。' },
      { name: '饮食习惯', content: '定时定量，避免过饱，多喝温水。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合有氧运动，促进血液循环。' },
      { name: '推荐运动', content: '慢跑、快走、太极拳、瑜伽等。' },
      { name: '运动频率', content: '每天1次，每次30-45分钟。' },
      { name: '注意事项', content: '运动强度适中，避免过度疲劳。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持心情舒畅，避免忧郁和愤怒。' },
      { name: '调节方法', content: '多参加户外活动，保持情绪稳定。' },
      { name: '生活习惯', content: '保证充足睡眠，避免熬夜和过度劳累。' },
      { name: '心理建议', content: '学会情绪管理，避免长期抑郁或愤怒。' }
    ]
  },
  qiYu: { // 气郁质
    diet: [
      { name: '饮食原则', content: '饮食宜疏肝理气，忌辛辣刺激。' },
      { name: '推荐食物', content: '柑橘、佛手、玫瑰花、菊花、柴胡、白萝卜等。' },
      { name: '少吃食物', content: '辛辣刺激、油腻厚味的食物。' },
      { name: '饮食习惯', content: '定时定量，细嚼慢咽，保持愉快心情进食。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合舒缓的运动，释放压力。' },
      { name: '推荐运动', content: '太极拳、瑜伽、散步、深呼吸等。' },
      { name: '运动频率', content: '每天1-2次，每次30分钟。' },
      { name: '注意事项', content: '运动时放松心情，避免紧张和焦虑。' }
    ],
    emotion: [
      { name: '情志原则', content: '学习情绪管理，避免抑郁和焦虑。' },
      { name: '调节方法', content: '多与朋友交流，参加社交活动，培养兴趣爱好。' },
      { name: '生活习惯', content: '保持规律作息，避免过度劳累。' },
      { name: '心理建议', content: '学习压力管理技巧，必要时寻求心理咨询。' }
    ]
  },
  teBing: { // 特禀质
    diet: [
      { name: '饮食原则', content: '饮食宜平和不刺激，避免易过敏的食物。' },
      { name: '推荐食物', content: '根据个人情况选择不易过敏的食物。' },
      { name: '少吃食物', content: '海鲜、牛奶、鸡蛋、花生等易引起过敏的食物。' },
      { name: '饮食习惯', content: '细嚼慢咽，避免暴饮暴食。' }
    ],
    exercise: [
      { name: '运动原则', content: '适合温和的运动，避免过度疲劳。' },
      { name: '推荐运动', content: '散步、太极拳、八段锦等。' },
      { name: '运动频率', content: '每天1次，每次20-30分钟。' },
      { name: '注意事项', content: '避免在花粉季节或污染严重的环境中运动。' }
    ],
    emotion: [
      { name: '情志原则', content: '保持心情平和，避免情绪激动。' },
      { name: '调节方法', content: '学习放松技巧，如深呼吸、冥想等。' },
      { name: '生活习惯', content: '保持环境清洁，避免接触过敏原。' },
      { name: '心理建议', content: '接受自己的体质特点，学会与之和平相处。' }
    ]
  }
}

onMounted(() => {
  // 从本地存储获取体质辨识结果
  const result = uni.getStorageSync('constitutionResult')
  if (result) {
    constitutionResult.value = result
  } else {
    // 如果没有体质辨识结果，提示用户先进行体质辨识
    uni.showModal({
      title: '提示',
      content: '您还未进行体质辨识，是否现在进行？',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/basic-info/constitution-test'
          })
        } else {
          uni.navigateBack()
        }
      }
    })
  }
})

function switchTab(tab) {
  activeTab.value = tab
}

function getConstitutionTypeKey() {
  if (!constitutionResult.value) return 'pingHe'
  
  const typeMap = {
    '平和质': 'pingHe',
    '气虚质': 'qiXu',
    '阳虚质': 'yangXu',
    '阴虚质': 'yinXu',
    '痰湿质': 'tanShi',
    '湿热质': 'shiRe',
    '血瘀质': 'xueYu',
    '气郁质': 'qiYu',
    '特禀质': 'teBing'
  }
  
  return typeMap[constitutionResult.value.type] || 'pingHe'
}

function getAdviceByTab() {
  const typeKey = getConstitutionTypeKey()
  return constitutionAdvice[typeKey][activeTab.value] || []
}

function goToTest() {
  uni.navigateTo({
    url: '/pages/basic-info/constitution-test'
  })
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">中医养生建议</view>
      <view class="subtitle">根据您的体质特点提供个性化养生方案</view>
    </view>
    
    <view v-if="constitutionResult" class="constitution-info">
      <view class="constitution-type">{{ constitutionResult.type }}</view>
      <view class="constitution-desc">{{ constitutionResult.description }}</view>
      <view class="test-date">测试日期: {{ new Date(constitutionResult.testDate).toLocaleDateString() }}</view>
      <button class="retest-btn" @click="goToTest">重新测试</button>
    </view>
    
    <view v-if="constitutionResult" class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'diet' }"
        @click="switchTab('diet')"
      >
        饮食养生
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'exercise' }"
        @click="switchTab('exercise')"
      >
        运动养生
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'emotion' }"
        @click="switchTab('emotion')"
      >
        情志养生
      </view>
    </view>
    
    <view v-if="constitutionResult" class="advice-content">
      <view 
        v-for="(item, index) in getAdviceByTab()" 
        :key="index"
        class="advice-item"
      >
        <view class="advice-title">{{ item.name }}</view>
        <view class="advice-text">{{ item.content }}</view>
      </view>
    </view>
    
    <view v-if="!constitutionResult" class="empty-state">
      <view class="empty-icon">📋</view>
      <view class="empty-text">暂无体质辨识结果</view>
      <view class="empty-subtext">请先进行体质辨识测试</view>
      <button class="test-btn" @click="goToTest">开始测试</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 30rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.constitution-info {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .constitution-type {
    font-size: 36rpx;
    font-weight: bold;
    color: #4caf50;
    margin-bottom: 15rpx;
    text-align: center;
  }
  
  .constitution-desc {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20rpx;
  }
  
  .test-date {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 20rpx;
  }
  
  .retest-btn {
    font-size: 26rpx;
    color: #4caf50;
    background-color: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 8rpx;
    padding: 10rpx 0;
  }
}

.tabs {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #4caf50;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 50%;
        height: 4rpx;
        background-color: #4caf50;
        border-radius: 4rpx;
      }
    }
  }
}

.advice-content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .advice-item {
    margin-bottom: 25rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .advice-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 24rpx;
        background-color: #4caf50;
        border-radius: 4rpx;
      }
    }
    
    .advice-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      padding-left: 20rpx;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .empty-subtext {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
  
  .test-btn {
    background-color: #4caf50;
    color: #fff;
    font-size: 28rpx;
    padding: 15rpx 30rpx;
    border-radius: 8rpx;
  }
}
</style>